<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h2>表单</h2>
<!--
    value="今天" : 初始化值
    size="30" : 文本框长度
    maxlength="4": 最多多少个字符
    readonly: 只读
    disabled: 禁用
    hidden: 隐藏
    label: 可扩展让文本也支持点击事件
    placeholder="请输入用户名"： 文本框提示信息
    required: 非空判断，不能为空，否则不能提交
    pattern: 使用正则表达式自定义
-->
<form action="媒体元素.html" method="post">
    <p>
        <label for="mark">你点我试试</label>
        <!--id的移动-->
<!--        <input id="mark" type="text">-->
    </p>
<!--    <p>姓名：<input type="text" name="username" value="今天" size="30" maxlength="4" readonly></p>-->
    <p>姓名：<input type="text" name="username" value="今天" size="30" maxlength="4" placeholder="请输入用户名"></p>
    <p>密码：<input id="mark" type="password" name="password" placeholder="密码" required></p>
    <p>
        <!--正则表达式：
            https://www.jb51.net/article/229226.htm#_label13
        -->
        自定义邮箱：<input type="text" name="zdyemail" pattern="^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$">
    </p>
    <p>
        性别：
        <input type="radio" name="sex" checked value="boy" disabled>男
        <input type="radio" name="sex" value="girl">女
    </p>
    <p>
        爱好：
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" checked value="eat">吃饭
        <input type="checkbox" name="hobby" checked value="chat">聊天
        <input type="checkbox" name="hobby" value="movie">看电影
    </p>
    <p>
        按钮：
        <input type="button" name="btn1" value="按钮点击">
    </p>
    <!--图片按钮点击会直接提交跳转到action的地址-->
    <p>
        图片：
        <input type="image" name="img1" src="../resources/img/测试.png">
    </p>
    <p>
        <!--下拉框：-->
        国家：
        <select name="sel1">
            <option value="China">中国</option>
            <option value="Russia" selected>俄罗斯</option>
            <option value="America">美国</option>
            <option value="Japan">日本</option>
        </select>
    </p>
    <p>
        <!--文本域-->
        反馈：<br>
        <textarea name="fankui" rows="10" cols="50">反馈内容</textarea>
    </p>
    <p>
        <!--文件域
            multiple: 多文件上传
        -->
        <input type="file" name="file1">
        <input type="file" name="file2" multiple>
    </p>
    <p>
        <!--邮箱：email 必须包括@符号，否则不能提交-->
        邮箱：<input type="email" name="emil1">
    </p>
    <p>
        url:<input type="url" name="url1">
    </p>
    <p>
        <!--数字：
            min: 最小值
            max: 最大值
            step: 每次增加减少多大的值
        -->
        number:<input type="number" name="number1" max="100" min="20" step="5">
    </p>
    <p>
        <!--滑块-->
        音量：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
    <p>
        <!--搜索框：search-->
        搜索：<input type="search" name="search1" value="今天">
    </p>
    <p>
        <input type="submit">
        <!--重置-->
        <input type="reset">
    </p>
</form>
</body>
</html>